<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<!--主要部分-->
		<div id="main">
			  
			 <!-- 左边内容-->
			<div id="section_left">
				<div id="header">
					<div class="header_img">
						<img src="img/QQ图片20160714155540.jpg"/>
					</div>
					<div class="header_info">
						<div class="header_name" style="float: left;">
							BOBO
						</div>
						
						<a id="menu_click">
							<i></i>
						</a>
					</div>
				</div>
				<div id="search_bar">
					<div class="search_content">
						<i></i>
						<input type="text" placeholder="搜索" name="" id="" value="" />
					</div>
				</div>

				<div id="tab">
					<div class="tab1">
						<a href=""><i></i></a>
					</div>
					<div class="tab2">
						<a href=""><i></i></a>
					</div>
					<div class="tab3">
						<a href=""><i></i></a>
					</div>

				</div>
				
				<ul id="linkman">
					<li class="friend">
					  	<div class="friend_img">
							<img src="img/QQ图片20160714155540.jpg"/>
					    </div>
					    <div class="friend_info">
							<div class="friend_name">
							BOBO
							</div>
					 	</div>
					</li>
				</ul>
				
			</div>
			 
			 <!--右边内容-->
			<div id="section_right">
				<!--标题栏-->
				<div class="title_box">
					<div class="title_wrap">
						<div class="title">
							详细信息
						</div>
					</div>
				</div>

				<div id="frient_content">
					<div class="frient_content_wrap">
						<div class="frient_img2">
							<img src="img/QQ图片20160714155540.jpg"/>
						</div>
						<div class="frientname_area">
							<div class="frientname">
								XXXX
							</div>
						</div>
						
						<div class="meta_area">
							<p ><span >备注：</span><span id="mark"></span></p>
							<p ><span >地区：</span><span id="place"></span></p>
						</div>
						<div class="action_area">
        				<a class="button"  href="#">发消息</a>
    					</div>
					</div>
				</div>
				
				
			</div>
			
		</div>
	</body>
</html>
<script src="js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$.post('friends.php',function(data){
	var json = data;
	var arr = json.userlist;
	addList(arr,arr.length)
},'json');
function addList(arr,num){
	for(var i=0;i<num;i++){
		var obj = arr[i];
		var li = '<li class="friend" id="man'+obj.Id+'" name="'+obj.cname+'" img="'+obj.cpic+'" mark="'+obj.cmark+'" place="'+obj.cplace+'" sex="'+obj.csex+'" intro="'+obj.cintro+'"><div class="friend_img"><img src="'+obj.cpic+'"/></div><div class="friend_info"><div class="friend_name">'+obj.cname+'</div></div></li>'
		$('#linkman li:last-child').after(li);
	}
}
$('#linkman').on('click','li',function(){
	$('#frient_content .frient_img2 img').attr('src',$(this).attr('img'));
	$('#frient_content .frientname').text($(this).attr('name'));
	$('#frient_content .meta_area #mark').text($(this).attr('mark'));
	$('#frient_content .meta_area #place').text($(this).attr('place'));
})
</script>